<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
        .el-upload__files {
            display: none;
        }
        .img-delete:before {
            position: absolute;
            top: -5px;
            color: red;
            margin-left: -15px;
            z-index: 999;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title" v-text="headerTitle">{{headerTitle}}</h1>
                <div>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">基本信息</span>
                        </div>
                        <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
                            <el-form-item label="名称" prop="name">
                                <el-input placeholder="请输入名称" style="width: 200px" v-model="addForm.name" :disabled="readonly"></el-input>&nbsp;&nbsp;<span v-if="readonly">(id: {{id}})</span>
                            </el-form-item>
                            <el-form-item label="类型" prop="type">
                                <el-select v-model="addForm.type" placeholder="请选择" style="width: 200px" :disabled="readonly">
                                    <el-option
                                            v-for="item in typeList"
                                            :label="item.name"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="专题介绍">
                                <el-input type="textarea" style="width:800px;"  v-model="addForm.desc" :disabled="readonly"></el-input>
                            </el-form-item>
                            <el-form-item label="Banner" prop="bannerUrl" v-loading="loading" v-if="addForm.type !== '3'">
                                <img v-if="addForm.bannerUrl !== ''" :src="qiniuUrl + addForm.bannerUrl" height="100">
                                <i class="el-icon-circle-close img-delete" v-if="addForm.bannerUrl !== '' && !readonly" @click="deleteImg">
                                </i>
                                <el-upload
                                        style="display: inline-block"
                                        action="/file/upload"
                                        :before-upload="beforeUpload"
                                        :on-success="uploadBannerSuccess"
                                        :show-file-list="false">
                                    <el-button type="primary" :disabled="readonly" v-if="readonly != true"> 上传图片</el-button>
                                    <div slot="tip" class="el-upload__tip" v-if="readonly != true">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <el-card class="box-card" style="margin-top: 10px">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">专题内容</span>
                            <el-button type="primary" style="float: right;" @click="clearForm" :disabled="readonly" v-if="readonly != true">添加</el-button>
                        </div>
                        <el-table
                                :data="tabData"
                                border
                                style="width: 100%">
                            <el-table-column
                                    type="index"
                                    label="序号"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    inline-template
                                    label="图片">
                                <div style="padding: 5px 0"><img height="50" v-if="row.picUrl !== '' && row.picUrl !== undefined" :src="qiniuUrl + row.picUrl"></div>
                            </el-table-column>
                            <el-table-column
                                    prop="isItem"
                                    label="是否商品"
                                    :formatter="itemFormat"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="商品"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="memo"
                                    label="备注">
                            </el-table-column>
                            <el-table-column
                                    prop="insertUser"
                                    label="创建人"
                                    v-if="showFlag">
                            </el-table-column>
                            <el-table-column
                                    prop="insertTime"
                                    label="创建时间"
                                    v-if="showFlag">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="操作"
                                    inline-template
                                    v-if="readonly != true">
                                <div style="margin-left: -10px">
                                    <el-dropdown>
                                        <el-button size="small" type="primary" :disabled="readonly" v-if="readonly != true">
                                            操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown" align="center">
                                            <el-dropdown-item><el-button size="mini" type="primary" :disabled="readonly" @click.native.prevent="moveUp($index)" v-if="$index !== 0">上移</el-button></el-dropdown-item>
                                            <el-dropdown-item><el-button size="mini" type="primary" :disabled="readonly" @click.native.prevent="edit(row, $index)">编辑</el-button></el-dropdown-item>
                                            <el-dropdown-item><el-button size="mini" type="primary" @click.native.prevent="deleteRow($index, row)" :disabled="readonly">删除</el-button></el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <div style="text-align: center;margin-top: 10px" v-if="!readonly">
                        <el-button type="primary"  @click="saveAdd" :disabled="readonly" v-if="readonly != true">保存</el-button>
                        <!--<el-button type="primary"  @click="next" :disabled="readonly" v-if="readonly != true">预览</el-button>-->
                        <el-button @click="cancel" :disabled="readonly" v-if="readonly != true">取消</el-button>
                    </div>
                    <div style="text-align: center;margin-top: 10px" v-else>
                        <el-button @click="back">返回</el-button>
                    </div>
                </div>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->
    <!--dialog-->
    <el-dialog v-model="addThemeDialog">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px">{{dialogTitle}}</span>
            </div>
            <el-form :model="addThemeForm" label-width="80px" :rules="themeRules" ref="addThemeForm">
                <el-form-item label="是否商品">
                    <el-switch on-text="" off-text="" v-model="addThemeForm.isItem" style="margin-top: 8px"></el-switch>
                </el-form-item>
                <el-form-item label="商品"  v-if="addThemeForm.isItem !== false" prop="itemId">
                    <el-tag v-if="tag !== '' && tag !== undefined" style="margin-right:5px;margin-top: 8px">{{tag}}</el-tag>
                    <el-button type="primary" @click.native.prevent="showDialog">选择商品</el-button>
                </el-form-item>
                <el-form-item label="图片" prop="picUrl" v-loading="picLoading">
                    <img v-if="addThemeForm.picUrl !== ''" :src="qiniuUrl + addThemeForm.picUrl" style="height:100px">
                    <i class="el-icon-circle-close img-delete" v-if="addThemeForm.picUrl !== ''" @click="deletePic">
                    </i>
                    <el-upload
                            style="display: inline-block"
                            action="/file/upload"
                            :before-upload="beforeUploadPic"
                            :on-success="uploadPicSuccess"
                            :show-file-list="false">
                        <el-button type="primary">上传图片</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input placeholder="请输入备注" style="width: 200px" v-model="addThemeForm.memo"></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <div slot="footer" style="text-align: center;">
            <el-button type="primary" @click.prevent.native="saveDialog">保存</el-button>
            <el-button @click.prevent.native="cancelDialog">取消</el-button>
        </div>
    </el-dialog>
    <yiqi-select-item ref="selectItem" :item-common-dialog="selectItemDialog" :check-list="checkData" :limit-num="1"
                      :checked-ids="checkedIds" :save-callback="saveCallback" :cancel-callback="cancelCallback"></yiqi-select-item>
    <!--dialog-->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<!-- 引入共通js -->
<script src="/static/js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                user: ${(user)!'null'},
                rules: {
                    name: [
                        {required: true, message: "名称不能为空"}
                    ],
                    type: [
                        {required: true, message: "类型不能为空"}
                    ],
                    bannerUrl: [
                        {required: true, message: "请上传图片"}
                    ]
                },
                dialogTitle: '添加专题内容',
                loading: false,
                qiniuUrl: list.qiniuUrl,
                addForm: {
                    name: '',
                    type: '',
                    memo: '',
                    bannerUrl: ''
                },
                typeList: [],
                themeRules: {
                    itemId: [
                        {required: true, message: "请选择商品"}
                    ],
                    picUrl: [
                        {required: true, message: "请上传图片"}
                    ]
                },
                picLoading: false,
                editObj: {},
                addThemeForm: {
                    isItem: false,
                    itemId: '',
                    picUrl: '',
                    memo: ''
                },
                editIndex: '',
                isEdit: false,
                contactForm: {},
                dialogFormVisible: false,
                addThemeDialog: false,
                tableData: [],
                checkData: [],
                headerNavList: list.headerNavList,
                accountNavList: [],
                leftMenuList: list.menu,
                selectItemDialog: false,
                checkedIds: [],
                tag:'',
                showFlag:false,
                tabData :[],
                itemId :'',
                detail: ${detail},
                readonly: ${readonly},
                headerTitle:''
            }
        },
        mounted:function () {
            this.editOrAdd();
            this.getTypeList();
        },
        methods: {
            deleteImg () {
                this.addForm.bannerUrl = "";
            },
            getTypeList () {
                let that = this;
                this.$get("/dictionary/list/MS_APP_SUBJECT_TYPE", {}, function (res) {
                    if (res.status === 100) {
                        that.typeList = res.returnValue;
                    } else {
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            deletePic () {
                this.addThemeForm.picUrl = "";
            },
            cancelDialog(){
                if (this.isEdit) {
                    let obj = {};
                    if (this.editObj.isItem) {
                        obj = {
                            id: this.editObj.id,
                            insertTime: this.editObj.insertTime,
                            isItem: 1,
                            picUrl: this.editObj.picUrl,
                            name: this.editObj.name !== undefined ? this.editObj.name : "",
                            memo: this.editObj.memo,
                            subjectId: this.editObj.subjectId,
                            orgName: this.editObj.orgName,
                            insertUser: this.editObj.insertUser,
                            itemId: this.editObj.itemId
                        }
                    } else {
                        obj = {
                            id: this.editObj.id,
                            insertTime: this.editObj.insertTime,
                            isItem: 0,
                            picUrl: this.editObj.picUrl,
                            name: '',
                            memo: this.editObj.memo,
                            subjectId: this.editObj.subjectId,
                            orgName: this.editObj.orgName,
                            insertUser: this.editObj.insertUser
                        }
                    }
                    this.tabData[this.editIndex] = obj;
                }
                this.addThemeDialog = false
            },
            showDialog () {
                this.selectItemDialog = true;
            },
            cancel () {
                window.location.href = "/special/index";
            },
            saveCallback () {
                this.checkedIds = this.$refs.selectItem.checked;
                this.selectItemDialog = false;
                this.checkData =  this.$refs.selectItem.checkedData;
                this.tag = this.$refs.selectItem.checkedData[0].name;
                this.addThemeForm.itemId = this.$refs.selectItem.checkedData[0].id;
                this.addThemeForm.name = this.$refs.selectItem.checkedData[0].name;
            },
            cancelCallback () {
                this.selectItemDialog = false;
            },
            back () {
                window.location.href = "/special/index";
            },
            edit (row, index) {
                let obj = {
                    id: row.itemId,
                    name: row.name,
                    orgName: row.orgName
                }
                this.dialogTitle = "编辑专题内容";
                this.isEdit = true;
                if (row.isItem === 1) {
                    this.checkData = [];
                    this.checkedIds = [];
                    this.checkedIds.push(row.itemId);
                    this.checkData.push(obj);
                    this.tag = row.name;
                } else {
                    this.checkData = [];
                    this.checkedIds = [];
                }
                this.addThemeForm = row;
                this.addThemeForm.isItem = this.addThemeForm.isItem === 0 ? false : true;
                this.editIndex = index;
                this.addThemeDialog = true;
                let editObj = {};
                if (this.addThemeForm.isItem) {
                    editObj = {
                        id: this.addThemeForm.id,
                        insertTime: this.addThemeForm.insertTime,
                        isItem: 1,
                        picUrl: this.addThemeForm.picUrl,
                        name: this.addThemeForm.name,
                        memo: this.addThemeForm.memo,
                        subjectId: this.addThemeForm.subjectId,
                        orgName: this.addThemeForm.orgName,
                        insertUser: this.addThemeForm.insertUser,
                        itemId: this.addThemeForm.itemId
                    }
                } else {
                    editObj = {
                        id: this.addThemeForm.id,
                        insertTime: this.addThemeForm.insertTime,
                        isItem: 0,
                        picUrl: this.addThemeForm.picUrl,
                        name: '',
                        memo: this.addThemeForm.memo,
                        subjectId: this.addThemeForm.subjectId,
                        orgName: this.addThemeForm.orgName,
                        insertUser: this.addThemeForm.insertUser
                    }
                }
                this.editObj = editObj;
            },
            itemFormat(row){
                if(row.isItem == 0){
                    return '不是';
                }else{
                    return '是';
                }
            },
            saveDialog(){
                let isValid1 = true;
                this.$refs.addThemeForm.validate(function (valid) {
                    if (!valid) {
                        isValid1 = false
                    }
                })
                if (this.isEdit) {
                    if (isValid1) {
                        this.addThemeForm.isItem = this.addThemeForm.isItem ? 1 : 0;
                        let obj = {};
                        if (this.addThemeForm.isItem) {
                            obj = {
                                id: this.addThemeForm.id,
                                insertTime: this.addThemeForm.insertTime,
                                isItem: 1,
                                picUrl: this.addThemeForm.picUrl,
                                name: this.addThemeForm.name,
                                memo: this.addThemeForm.memo,
                                subjectId: this.addThemeForm.subjectId,
                                orgName: this.addThemeForm.orgName,
                                insertUser: this.addThemeForm.insertUser,
                                itemId: this.addThemeForm.itemId
                            }
                        } else {
                            obj = {
                                id: this.addThemeForm.id,
                                insertTime: this.addThemeForm.insertTime,
                                isItem: 0,
                                picUrl: this.addThemeForm.picUrl,
                                name: '',
                                memo: this.addThemeForm.memo,
                                subjectId: this.addThemeForm.subjectId,
                                orgName: this.addThemeForm.orgName,
                                insertUser: this.addThemeForm.insertUser
                            }
                        }
                        this.tabData[this.editIndex] = obj;
                        this.addThemeDialog = false;
                        this.addThemeForm.isItem = false;
                        this.tableData = [];
                        this.checkedIds = [];
                        this.addThemeForm.memo = '';
                        this.tag = '';
                        this.addThemeForm.picUrl = '';
                    } else {
                        this.$message.error('请完善信息');
                    }
                } else {
                    let obj ={};
                    if (isValid1) {
                        if(this.addThemeForm.isItem !== false){
                            obj ={
                                isItem: 1,
                                name:this.$refs.selectItem.checkedData[0].name,
                                picUrl:this.addThemeForm.picUrl,
                                itemId: this.addThemeForm.itemId,
                                memo: this.addThemeForm.memo
                            }
                        }else{
                            obj ={
                                isItem:0,
                                picUrl:this.addThemeForm.picUrl,
                                name:'',
                                memo: this.addThemeForm.memo
                            }
                        }
                        this.tabData.push(obj);
                        this.addThemeDialog = false;
                        this.addThemeForm.isItem = false;
                        this.tableData = [];
                        this.checkedIds = [];
                        this.addThemeForm.memo = '';
                        this.tag = '';
                        this.addThemeForm.picUrl = '';
                    } else {
                        this.$message.error('请完善信息');
                    }
                }
            },
            deleteRow(id, row){
                if (row.isItem === 1) {
                    let index = "";
                    this.tableData.forEach(function (item) {
                        if (item.id === row.itemId) {
                            index = this.tableData.indexOf(item);
                        }
                    })
                    this.tableData.splice(index, 1);
                    this.checkedIds.splice(index, 1);
                }
                this.tabData.splice(id,1)
            },
            clearForm(){
                this.isEdit = false;
                this.addThemeForm.isItem = false;
                this.checkedIds = [];
                this.checkData = [];
                this.addThemeForm.memo = '';
                this.addThemeForm.itemId = '';
                this.addThemeForm.picUrl = '';
                this.addThemeDialog = true;
            },
            uploadPicSuccess(response,file){
                if (response.status === 100) {
                    this.picLoading = false;
                    this.addThemeForm.picUrl = response.returnValue[0].id + this.imgType;
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            uploadBannerSuccess(response,file){
                if (response.status === 100) {
                    this.loading = false;
                    this.addForm.bannerUrl = response.returnValue[0].id + this.imgType;
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            beforeUploadPic (file) {
                if (file.type === "image/png") {
                    this.picLoading = true;
                    this.imgType = ".png";
                    return true;
                } else if (file.type === "image/jpeg") {
                    this.picLoading = true;
                    this.imgType = ".jpg";
                    return true;
                } else {
                    this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
                    return false;
                }
            },
            beforeUpload (file) {
                if (file.type === "image/png") {
                    this.loading = true;
                    this.imgType = ".png";
                    return true;
                } else if (file.type === "image/jpeg") {
                    this.loading = true;
                    this.imgType = ".jpg";
                    return true;
                } else {
                    this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
                    return false;
                }
            },
            saveAdd(){
                let that = this;
                let isValid1 = true;
                this.$refs.addForm.validate(function (valid) {
                    if (!valid) {
                        isValid1 = false
                    }
                })
                if (isValid1) {
                    let url = '';
                    let success = "";
                    let obj = {};
                    let items = [];
                    this.tabData.forEach(function (item) {
                        let s = {
                            itemId: item.itemId,
                            memo: item.memo,
                            isItem: item.isItem,
                            picUrl:item.picUrl
                        }
                        items.push(s);
                    })
                    if(this.detail.id !== undefined){
                        obj={
                            id:this.id,
                            items: items,
                            type: this.addForm.type,
                            name:this.addForm.name,
                            bannerUrl:this.addForm.bannerUrl,
                            desc: this.addForm.desc
                        }
                        url = '/special/update';
                        success = "编辑成功";
                    }else{
                        obj ={
                            items: items,
                            name:this.addForm.name,
                            type: this.addForm.type,
                            bannerUrl: this.addForm.bannerUrl,
                            desc: this.addForm.desc
                        }
                        url = '/special/insert';
                        success = "添加成功";
                    }
                    this.http(url,obj,function (res) {
                        if(res.status == 200){
                            //this.specialList = res.data.list
                            that.$alert(success,'提示',{
                                confirmButtonText:'确定',
                                callback: function () {
                                    window.location.href = "/special/index";
                                }
                            })
                        }else{
                            that.$alert(res.errMsg, '提示', {
                                confirmButtonText: '确定',
                            });
                        }
                    },function (res) {
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定'
                        })
                    })
                } else {
                    this.$message.error('请完善信息');
                }
            },
            editOrAdd(){
                if(this.detail !== false){
                    let that = this;
                    this.showFlag = true;
                    this.id = this.detail.id;
                    this.addForm.name = this.detail.name;
                    this.addForm.desc = this.detail.desc;
                    this.addForm.type = this.detail.type + "";
                    this.addForm.bannerUrl = this.detail.bannerUrl;
                    this.detail.items.forEach(function (item) {
                        that.checkedIds.push(item.itemId);
                        let obj = {
                            name: item.itemName,
                            id: item.id,
                            itemId:item.itemId,
                            isItem:item.isItem,
                            subjectId:item.subjectId,
                            picUrl: item.picUrl !== undefined ? item.picUrl : "",
                            orgName: item.orgName,
                            insertUser: item.insertUser,
                            insertTime: item.insertTime,
                            memo:item.memo
                        }
                        that.tabData.push(obj);
                    })
                    if(this.readonly){
                        this.headerTitle = '自定义专题详情'
                    }else{
                        this.headerTitle = '编辑自定义专题'
                    }
                }else{
                    this.headerTitle = '添加自定义专题'
                }
            },
            moveUp(a){
                this.tabData[a -1] = this.tabData.splice(a, 1, this.tabData[a - 1])[0];
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>